<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <h1>{{info}}</h1>
        <!-- 指令v-称为指令  （directives） -->
        <!-- 
            v-text:解析的都是普通文本
            v-html:如果都是文本就按照文本解析，如果有html标签按照html解析，不安全
            注：innerHTML innerText  区别一致          

         -->
        <h1 v-text="info"></h1>
        <h1 v-html="info"></h1>
        <h1 v-text="msg"></h1>
        <h1 v-html="msg"></h1>

        <!-- {{}} 指令中的值 可以直接进行更改 页面上的值也跟着进行更改 -->

        <!-- v-once实现一次性插入 效果：加上v-once之后值就不会再进行更改 -->
        <h1 v-once>{{info}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el:'.box',
            data:{
                info:'今天天气不太好！！',
                msg:'<p>精神精神</p>',
            }
        })



        /* 
        vue
        优点 缺点
        模式
        如何data中的值  初始值
        mustache语法
        指令 
        v-text v-html v-once 
        vue的数据是响应式

        
        
        
        */
    </script>
</body>
</html>